<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>深圳地图</title>
    <!-- 引入高德地图JS API -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=e18e66edf3e406ef922d9bc9b02e93fc"></script>
    <style>
        #container {
            width: 100%;
            height: 100vh;
        }

        #legend {
            position: absolute;
            top: 100px;
            left: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px #999;
            z-index: 1000;
            display: block;
        }
        #legend h4 {
            margin-top: 0;
        }
        #toggleLegend {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1001;
            background: #fff;
            border: none;
            padding: 15px 20px; /* 增大按钮的内边距 */
            font-size: 18px;    /* 增大字体大小 */
            border-radius: 10px; /* 增加圆角 */
            cursor: pointer;
            box-shadow: 0 0 10px #999; /* 增强按钮的阴影效果 */
            font-weight: bold;  /* 让文字更加醒目 */
        }

    </style>
</head>
<body>
<div id="container"></div>
<button id="toggleLegend">隐藏图例</button>
<div id="legend">
    <h4>图例</h4>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/kg_logo.png" style="width: 20px;"> 深圳宝安机场 </p>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/jhl_logo.png" style="width: 20px;"> 维也纳国际酒店 </p>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/wiggle.png" style="width: 20px;"> 华丰华源科技创新园A座 </p>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/mdou.png" style="width: 20px;"> 海城新村2区 </p>

</div>
<script type="text/javascript">
    //图例
    var toggle = document.getElementById('toggleLegend');
    var legend = document.getElementById('legend');

    toggle.onclick = function() {
        if (legend.style.display === 'none') {
            legend.style.display = 'block';
            toggle.textContent = '隐藏图例';
        } else {
            legend.style.display = 'none';
            toggle.textContent = '显示图例';
        }
    };

    //地图
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 14,
        center: [113.81841,22.637524] // 设置中心点为宝安机场
    });

    // 创建不同的图标
    var hhlIcon = new AMap.Icon({
        size: new AMap.Size(50, 50), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/hhl_logo.png', // 黄鹤楼图标
        imageSize: new AMap.Size(50, 50)
    });

    var gdsIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/gds_logo.png', // 古德寺图标
        imageSize: new AMap.Size(30, 30)
    });

    var mtIcon = new AMap.Icon({
        size: new AMap.Size(50, 50), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/mt_logo.png', // 码头图标
        imageSize: new AMap.Size(50, 50)
    });

    var jhlIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/jhl_logo.png', // 江汉路图标
        imageSize: new AMap.Size(30, 30)
    });

    var kgIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/kg_logo.png', // 空轨图标
        imageSize: new AMap.Size(30, 30)
    });

    var lhplIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/lhpl_logo.png', // 黎黄陂路图标
        imageSize: new AMap.Size(30, 30)
    });

    var xbkIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/xbk.png', // 星巴克图标
        imageSize: new AMap.Size(30, 30)
    });

    var mdouIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/mdou.png', // m豆旗舰店图标
        imageSize: new AMap.Size(30, 30)
    });

    var shckIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/sihangcangku.png', // 上海四行仓库抗战纪念馆
        imageSize: new AMap.Size(30, 30)
    });

    var wiggleIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/wiggle.png', // wiggle
        imageSize: new AMap.Size(30, 30)
    });

    var hundsunIcon = new AMap.Icon({
        size: new AMap.Size(60, 60), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/hundsun_logo.webp', // 恒生电子图标
        imageSize: new AMap.Size(60, 60)
    });

    var blueIcon = new AMap.Icon({
        size: new AMap.Size(50, 50), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/mark_b.png', // 蓝色图标
        imageSize: new AMap.Size(50, 50)
    });

    // 创建标记的函数
    function createMarker(lngLat, icon, title) {
        var marker = new AMap.Marker({
            position: lngLat,
            icon: icon, // 设置图标
            title: title // 设置标记的名称
        });

        // 创建信息窗口
        var infoWindow = new AMap.InfoWindow({
            content: title, // 信息窗口的内容
            offset: new AMap.Pixel(0, -30) // 信息窗口的偏移量
        });

        // 为标记添加点击事件，点击标记时显示信息窗口
        marker.on('click', function() {
            infoWindow.open(map, marker.getPosition()); // 在标记位置打开信息窗口
        });

        marker.setMap(map);
    }

    // 创建标记并加上文字备注
    createMarker(new AMap.LngLat(113.81841,22.637524), kgIcon, '深圳宝安机场');
    createMarker(new AMap.LngLat(113.871793,22.566174), jhlIcon, '维也纳国际酒店');
    createMarker(new AMap.LngLat(113.873063,22.573653), wiggleIcon, '华丰华源科技创新园A座');
    createMarker(new AMap.LngLat(113.871606,22.571318), mdouIcon, '海城新村2区');
    createMarker(new AMap.LngLat(121.471104,31.24034), shckIcon, '上海四行仓库抗战纪念馆');
    createMarker(new AMap.LngLat(121.440551,31.213338), wiggleIcon, '.wiggle wiggle');
    createMarker(new AMap.LngLat(121.493264,31.232487), mtIcon, '金陵东路渡口');
    createMarker(new AMap.LngLat(121.503375,31.230032), mtIcon, '东昌路渡口');
    createMarker(new AMap.LngLat(121.468662,31.208197), lhplIcon, '田子坊艺术区');



    //2、添加路线标记
    //2.1 游轮航线
    // 多个地铁站的经纬度
    var ferryLine = [
        [114.294686,30.550602],
        [114.297382,30.575406]
    ];

    // 创建一个折线对象，连接所有地铁站
    var ferryPolyline1 = new AMap.Polyline({
        path: ferryLine, // 所有地铁站的经纬度路径
        strokeColor: "#00ADEF", // 线路颜色（设置为明亮的蓝色以模拟水色）
        strokeOpacity: 1, // 线路的透明度
        strokeWeight: 4, // 线路的粗细
        lineJoin: 'round', // 线条连接处样式
        lineCap: 'round', // 线条的端点样式
        strokeStyle: "dashed", // 设置线条为虚线
        strokeDasharray: [10, 5, 10, 5] // 自定义虚线的样式，数组内为线段和间隙的长度
    });


    // 将折线添加到地图中
    ferryPolyline1.setMap(map);

    //2.2 源深路 - 陆家嘴
    // 多个地铁站的经纬度
    var metroLine1 = [
        [121.530972,31.241346], // 汉口站-地铁站
        [121.519286,31.240366], // 范湖-地铁站
        [121.512464,31.238517],
        [121.502133,31.23831]
    ];

    // 创建一个折线对象，连接所有地铁站
    var metroPolyline1 = new AMap.Polyline({
        path: metroLine1, // 所有地铁站的经纬度路径
        strokeColor: "#5DB996", // 线路颜色
        strokeOpacity: 1, // 线路的透明度
        strokeWeight: 9, // 线路的粗细，数值越大越粗
        lineJoin: 'round', // 线条连接处样式
        lineCap: 'round' // 线条的端点样式
    });

    // 将折线添加到地图中
    metroPolyline1.setMap(map);

    //2.3 南京西路 - 四行仓库
    // 多个地铁站的经纬度
    var metroLine2 = [
        [121.475133,31.232713],
        [121.45998,31.229886],
        [121.460092,31.241527],
        [121.471474,31.242386]
    ];

    // 创建一个折线对象，连接所有地铁站
    var metroPolyline2 = new AMap.Polyline({
        path: metroLine2, // 所有地铁站的经纬度路径
        strokeColor: "#8D0B41", // 线路颜色
        strokeOpacity: 1, // 线路的透明度
        strokeWeight: 9, // 线路的粗细，数值越大越粗
        lineJoin: 'round', // 线条连接处样式
        lineCap: 'round' // 线条的端点样式
    });

    // 将折线添加到地图中
    metroPolyline2.setMap(map);


</script>
</body>
</html>
